<template>
  <div class="app-container">
    <!-- :disabled="$route.query.isInfo || isInfo" -->
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :model="formData" :rules="rules" size="medium"
      label-width="180px">
      <h2 style="text-align: center">仪器设备计量检定要求</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceId">
            <el-select v-if="!($route.query.isInfo || isInfo || $route.query.isEdit)" filterable
              :disabled="$route.query.isEdit" v-model="formData.deviceId" placeholder="请选择设备名称" clearable
              @change="changeDevice" :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                :value="item.deviceId" :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.deviceCode
                }}</span></el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>
            <!-- <div style="display: flex;">
              <el-select :disabled="$route.query.isEdit" filterable v-model="formData.deviceId" placeholder="请选择设备名称"
                clearable @change="changeDevice" :style="{ width: '100%' }" :filter-method="changeInput">
                <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                  :value="item.deviceId" :disabled="item.disabled">
                  <span style="float: left">{{ item.deviceName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    item.deviceCode
                  }}</span>
                </el-option>
              </el-select>
              <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" size="mini" @click="sousuo">查询</el-button>
            </div> -->
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="设备型号" prop="spec">
            <el-input disabled v-model="formData.spec" placeholder="请输入设备型号" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input disabled v-model="formData.deviceCode" placeholder="请输入设备编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="溯源方式" prop="traceMethod">
            <el-select disabled v-model="formData.traceMethod" placeholder="请选择溯源方式" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_trace_method" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
            <!-- <el-input
              v-model="formData.traceMethod"
              placeholder="请输入溯源方式"
              clearable
              :style="{ width: '100%' }"
            ></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检定/校准有效期(月)" prop="checkPeriod">
            <el-input disabled v-model="formData.checkPeriod" placeholder="请输入校准/计量检定周期" clearable
              :style="{ width: '100%' }">
              <template slot="append">个月</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门" prop="deptId">
            <el-cascader disabled :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择所属部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在位置" prop="site">
            <el-select disabled v-model="formData.site" placeholder="请选择位置" clearable :style="{ width: '100%' }">
              <el-option v-for="dict in dict.type.sys_site_list" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备检定/校准测试标准" prop="checkRule">
            <el-input v-model="formData.checkRule" placeholder="请输入设备检定/校准测试标准" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="附加说明(试验规程)" prop="otherExplain">
            <el-input v-model="formData.otherExplain" placeholder="请输入附加说明(试验规程)" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label="水运工程编码" prop="water">
            <el-input v-model="formData.water" placeholder="请输入水运工程编码" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="建设工程编码" prop="build">
            <el-input v-model="formData.build" placeholder="请输入建设工程编码" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="对应参数" prop="param">
            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" v-model="formData.param"
              placeholder="请输入对应参数" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="设备用途" prop="useInfo">
            <el-input disabled type="textarea" v-model="formData.useInfo" placeholder="请输入单行文本设备用途" clearable
              :autosize="{ minRows: 10, maxRows: 20 }" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="对应设备检备编码" prop="highway">
            <!-- <el-input
              v-model="formData.highway"
              placeholder="请输入公路工程编码"
              clearable
              :style="{ width: '100%' }"
            ></el-input> -->
            <!-- <el-checkbox-group v-model="formData.highway"> -->
            <el-checkbox v-model="formData.highway" label="公路工程编码"></el-checkbox>
            <el-checkbox v-model="formData.water" label="水运工程编码"></el-checkbox>
            <el-checkbox v-model="formData.build" label="建设工程编码"></el-checkbox>
            <!-- </el-checkbox-group> -->
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">检验参数</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="规定项-首检" prop="fixFirst">
            <el-input type="textarea" v-model="formData.fixFirst" placeholder="请输入规定项-首检" clearable
              :autosize="{ minRows: 10, maxRows: 20 }" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规定项-后续检定" prop="fixNext">
            <el-input type="textarea" v-model="formData.fixNext" placeholder="请输入规定项-后续检定" clearable
              :autosize="{ minRows: 10, maxRows: 20 }" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="必检项-首检" prop="mustFirst">
            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" v-model="formData.mustFirst"
              placeholder="请输入必检项-首检" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="必检项-后续检定" prop="mustNext">
            <el-input type="textarea" v-model="formData.mustNext" placeholder="请输入必检项-后续检定" clearable
              :autosize="{ minRows: 10, maxRows: 20 }" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">检定点要求</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="规范中有明确要求" prop="request">
            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" v-model="formData.request"
              placeholder="请输入规范中有明确要求" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="无明确要求自行确定的" prop="custom">
            <el-input type="textarea" v-model="formData.custom" placeholder="请输入无明确要求自行确定的" clearable
              :autosize="{ minRows: 10, maxRows: 20 }" :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">其他要求</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="其他要求" prop="otherRequest">
            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" v-model="formData.otherRequest"
              placeholder="请输入其他要求" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="value == 1" type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(0)">暂存</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { listSelect } from "@/api/device/device.js";
import {
  deviceCheckAskAdd,
  updategdeviceCheckAsk,
  deviceCheckAskInfo,
  restart
} from "@/api/device/deviceCheckAsk.js";
import {
  delProcess,
} from "@/api/workflow/process";
export default {
  components: {},
  dicts: [
    "sys_device_type",
    "sys_device_content",
    "sys_trace_method",
    "sys_site_list",
  ],
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formData: {
        useInfo: undefined,
        fixFirst: undefined,
        fixNext: undefined,
        mustFirst: undefined,
        mustNext: undefined,
        request: undefined,
        custom: undefined,
        otherRequest: undefined,
        deviceCode: undefined,
        deviceId: undefined,
        spec: undefined,
        checkPeriod: null,
        checkDate: null,
        deptId: undefined,
        highway: false,
        water: false,
        build: false,
        traceMethod: undefined,
        site: undefined,
        checkRule: undefined,
        otherExplain: undefined,
        param: undefined,
      },
      deptOptions: [],
      rules: {
        useInfo: [
          {
            required: true,
            message: "请输入单行文本设备用途",
            trigger: "blur",
          },
        ],
        fixFirst: [
          {
            required: true,
            message: "请输入规定项-首检",
            trigger: "blur",
          },
        ],
        fixNext: [
          {
            required: true,
            message: "请输入规定项-后续检定",
            trigger: "blur",
          },
        ],
        mustFirst: [
          {
            required: true,
            message: "请输入必检项-首检",
            trigger: "blur",
          },
        ],
        mustNext: [
          {
            required: true,
            message: "请输入必检项-后续检定",
            trigger: "blur",
          },
        ],
        request: [
          {
            required: true,
            message: "请输入规范中有明确要求",
            trigger: "blur",
          },
        ],
        custom: [
          {
            required: true,
            message: "请输入无明确要求自行确定的",
            trigger: "blur",
          },
        ],
        otherRequest: [
          {
            required: true,
            message: "请输入其他要求",
            trigger: "blur",
          },
        ],
        build: [
          {
            required: true,
            message: "请输入建设工程编码",
            trigger: "blur",
          },
        ],
        traceMethod: [
          {
            required: true,
            message: "请选择溯源方式",
            trigger: "change",
          },
        ],
        site: [
          {
            required: true,
            message: "请输入所在位置",
            trigger: "blur",
          },
        ],
        checkRule: [
          {
            required: true,
            message: "请输入设备检定/校准测试标准",
            trigger: "blur",
          },
        ],
        otherExplain: [
          {
            required: true,
            message: "附加说明(试验规程)",
            trigger: "blur",
          },
        ],
        param: [
          {
            required: true,
            message: "对应参数",
            trigger: "blur",
          },
        ],
        highway: [
          {
            required: true,
            message: "请输入公路工程编码",
            trigger: "blur",
          },
        ],
        water: [
          {
            required: true,
            message: "请输入水运工程编码",
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择所属部门",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],

        spec: [
          {
            required: true,
            message: "请输入设备型号",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "其他说明不能为空",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "设备数量",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        deviceTypeValue: [
          {
            required: true,
            message: "请选择设备类型",
            trigger: "change",
          },
        ],
        checkPeriod: [
          {
            required: true,
            message: "请选择检定/校准有效期(月)",
            trigger: "change",
          },
        ],
        checkDate: [
          {
            required: true,
            message: "请选择验收日期",
            trigger: "change",
          },
        ],
        isAppearance: [
          {
            required: true,
            message: "设备外观不能为空",
            trigger: "change",
          },
        ],
        isFunction: [
          {
            required: true,
            message: "设备功能 不能为空",
            trigger: "change",
          },
        ],
        confirmAppearance: [
          {
            required: true,
            message: "外观确认不能为空",
            trigger: "change",
          },
        ],
        confirmFunction: [
          {
            required: true,
            message: "功能确认不能为空",
            trigger: "change",
          },
        ],
        isAgreement: [
          {
            required: true,
            message: "合同情况不能为空",
            trigger: "change",
          },
        ],
      },
      deviceOptions: [],
      disabledEdit: true,
      value: 0,
      flag: '',

    };
  },
  computed: {},
  created() {
    this.listSelect();
    if (
      this.$route.query.isEdit ||
      this.$route.query.isInfo ||
      this.isInfo ||
      this.$route.query.isClone
    ) {
      this.getinfo();
    }
    this.getDeptTree();
  },
  mounted() {
    console.log(this.$route.query.taskId, this.$route.query.procInsId);
    this.disabledEdit = this.$route.query.value == 1 && !this.$route.query.id ? true : false
    console.log(this.disabledEdit);
    this.value = this.$route.query.value
    this.btnShow = true
    this.flag = this.$route.query.flag


  },
  methods: {
    /** 查询所属部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeInput(e) {
      console.log(e);
      this.keyword = e
    },
    sousuo() {
      listSelect({ status: 0, busStatus: 6, managerUserId: this.$store.state.user.id, keyword: this.keyword }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    changeDevice(i) {
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      console.log(row, "2222");
      if (row) {
        this.formData.deviceCode = row.deviceCode;
        this.formData.useInfo = row.useInfo;

        this.formData.traceMethod = row.traceMethod;
        this.formData.checkPeriod = row.checkPeriod;
        this.formData.site = row.site;

        this.formData.deviceName = row.deviceName;

        this.formData.spec = row.spec;
        this.formData.deptId = row.deptId;
        this.formData.deptName = row.deptName;
      } else {
        this.formData.deviceCode = undefined;
        this.formData.deviceName = undefined;
        this.formData.useInfo = undefined;

        this.formData.spec = undefined;
        this.formData.deptId = undefined;
        this.formData.deptName = undefined;
      }
      console.log(this.formData.deptId);
    },
    listSelect() {
      listSelect({ status: 0, busStatus: 6, managerUserId: this.$store.state.user.id }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      console.log('./././././.');
      return deviceCheckAskInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
          if (this.$route.query.isClone) {
            //colne
            this.formData.deviceId = undefined;
            this.formData.deviceCheckAskId = undefined;
            this.changeDevice(null);
          }
          this.formData.build = this.formData.build == 'true' ? true : false
          this.formData.water = this.formData.water == 'true' ? true : false
          this.formData.highway = this.formData.highway == 'true' ? true : false
          console.log(this.formData.highway, this.formData.water, this.formData.build);
          console.log(this.$route.query.userId, this.$store.state.user.id, this.formData.status);
          // if(this.formData.status == 'end'){
          this.formData.taskId = this.$route.query.taskId ? this.$route.query.taskId : this.formData.taskId
          this.formData.procInsId = this.$route.query.procInsId ? this.$route.query.procInsId : this.formData.procInsId
          // }
          if ((this.$store.state.user.id == this.$route.query.userId && this.formData.status == 'audit')) {

            console.log('////');
            // 可以编辑
            this.disabledEdit = false
            this.value = 1
            console.log(this.disabledEdit);
          }
        }
      );
    },
    submitForm(e) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status == 'draft' || !query.status) {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      if (e == 0 && this.disabledEdit) {
        if (!this.formData.deviceId) {
          this.$message.warning("请先选择设备名称");
          return;
        }
        if (this.disabledEdit == false) {
          updategdeviceCheckAsk(query).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.resetForm();
          });
        } else {
          deviceCheckAskAdd(query).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.resetForm();
          });
        }
        return
      }
      if (this.flag == '克隆') {
        this.disabledEdit = true
        query.status = e == 0 ? 'draft' : 'audit'
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
          console.log(query);
          // return
          if (this.disabledEdit == false) {
            if (query.status == 'end') {
              delProcess(query.piid).then((response) => {
                if (response.code == 200) {
                  query.piid = ''
                  query.status = 'audit'
                  restart(query).then((response) => {
                    this.$modal.msgSuccess("修改成功");
                    this.resetForm();
                  });
                }
              })
            } else {
              updategdeviceCheckAsk(query).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.resetForm();
              });
            }

          } else {
            deviceCheckAskAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });

    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
